<template>
    <div class="pages">
        <div class="header">
            <div class="title">
                <div class="name">MMM</div>
                <div class="value">{{ $t('mall.商城') }}</div>
            </div>
            <div class="item" :class="active == 'buy' ? 'active' : ''" @click="change('buy')">{{ $t('mall.购买') }}</div>
            <div class="item" :class="active == 'sell' ? 'active' : ''" @click="change('sell')">{{ $t('mall.出售') }}
            </div>
            <div class="close" v-if="type" @click="type = !type"><i class="el-icon-close"></i></div>
        </div>
        <!-- <div class="content"> -->
            <MallDeta :id="id" :type="active" v-if="type" />
            <MallList :type="active" v-else @ok="submit" />
        <!-- </div> -->
    </div>
</template>
<script>
import MallList from "@/components/mall/MallList.vue"
import MallDeta from "@/components/mall/MallDeta.vue"

export default {
    components: {
        MallList,
        MallDeta
    },
    data() {
        return {
            active: 'buy',
            type: false,
            id: null
        }
    },
    methods: {
        change(value) {
            this.active = value;
            this.type = false;
        },
        submit(item) {
            this.type = true;
            this.id = item.id;
        }
    }
}
</script>

<style scoped lang="scss">
.pages {
    flex: 1;
    overflow: hidden;
    background: #EDEDED;
    // display: flex;
    // flex-direction: column;

    .header {
        height: 92px;
        padding: 0 170px;
        box-sizing: border-box;
        background: #FCFCFE;
        box-shadow: inset 0px -1px 0px 0px rgba(104, 104, 104, 0.1);
        display: flex;
        position: relative;

        .title {
            height: 92px;
            text-align: center;
            font-weight: bold;
            font-size: 28px;
            color: #2273FF;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {}
        }

        .item {
            height: 28px;
            line-height: 28px;
            font-weight: 500;
            font-size: 20px;
            color: #7F7F7F;
            margin: 0 66px;
            padding-top: 40px;
            cursor: pointer;

            &.active {
                position: relative;
                color: #333333;
                font-weight: bold;

                &::after {
                    content: "";
                    width: 44px;
                    height: 6px;
                    background: #2273FF;
                    border-radius: 3px 3px 3px 3px;
                    position: absolute;
                    left: 50%;
                    bottom: -16px;
                    z-index: 2;
                    transform: translateX(-50%);
                }

            }
        }

        .close {
            font-size: 30px;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 50%;
            z-index: 2;
            transform: translateY(-50%);
        }
    }

  
}
</style>